import { cloneDeep } from 'lodash';
import {
  componentGroupConfig,
  visualComponentConfig,
  visualComponentGroup
} from './dashboard-visual-config/dashboard-visual-config';

/**
 * 画布分辨率列表
 */
export const resolutionRatioList = [
  {
    value: '2560x1600',
    label: '2560x1600',
  },
  {
    value: '2560x1440',
    label: '2560x1440',
  },
  {
    value: '2048x1536',
    label: '2048x1536',
  },
  {
    value: '2048x1152',
    label: '2048x1152',
  },
  {
    value: '1920x1440',
    label: '1920x1440',
  },
  {
    value: '1920x1200',
    label: '1920x1200',
  },
  {
    value: '1920x1080',
    label: '1920x1080',
  },
  {
    value: '1856x1392',
    label: '1856x1392',
  },
  {
    value: '1792x1344',
    label: '1792x1344',
  },
  {
    value: '1680x1050',
    label: '1680x1050',
  },
  {
    value: '1600x1200',
    label: '1600x1200',
  },
  {
    value: '1600x900',
    label: '1600x900',
  },
  {
    value: '1400x1050',
    label: '1400x1050',
  },
  {
    value: '1400x900',
    label: '1400x900',
  },
  {
    value: '1366x768',
    label: '1366x768',
  },
  {
    value: '1360x768',
    label: '1360x768',
  },
  {
    value: '1280x1024',
    label: '1280x1024',
  },
  {
    value: '1280x960',
    label: '1280x960',
  },
  {
    value: '1280x800',
    label: '1280x800',
  },
  {
    value: '1280x768',
    label: '1280x768',
  },
  {
    value: '1152x864',
    label: '1152x864',
  },
  {
    value: '1024x600',
    label: '1024x600',
  },
  {
    value: '800x600',
    label: '800x600',
  },
  {
    value: '768x1024',
    label: '768x1024',
  },
  {
    value: '414x736',
    label: '414x736',
  },
  {
    value: '375x812',
    label: '375x812',
  },
  {
    value: '375x667',
    label: '375x667',
  },
];

/**
 * 仪表板标题
 */
export const dashboardTitle = '可视化编辑器';

/**
 *  画布配置
 */
export const canvasPanelConfig = {
  //百分比最小值
  percentageMinVal: 25,
  //百分比最大值
  percentageMaxVal: 100,
  //百分比步长
  percentageStepVal: 5,
  //缩放间隔值
  scaleSpacingValue: 100,
  //组件根id
  componentTreeRootNodeId: '_COMPONENT_TREE_ROOT_ID_',
  //图层根
  componentTreeRootNode: {
    id: '_COMPONENT_TREE_ROOT_ID_',
    name: 'root',
    label: '我的组件树',
    group: 'group',
    layerType: 'group',
    active: false,
    level: 0,
    propertyComponent: '',
    componentStyleGeneratorName: '',
    componentDimensions: {
      width: 0,
      height: 0,
    },
    componentPosition: {
      top: 0,
      left: 0,
    },
    children: [],
  },
};

//组图片
import groupImg from '@/visual/assets/img/dashboard/group.png';
import {
  visualComponents,
  visualPropertyComponents,
  visualStyleGenerator,
} from './dashboard-visual-config/dashboard-visual-comp-config';

/**
 * 画布初始化选项
 */
export const canvasInitOptions = {
  canvasDimensions: {
    width: 1920,
    height: 1080,
  },
  styleProps: {
    backgroundColor: 'rgba(0,0,0,1)',
    backgroundImage: '',
    backgroundRepeat: 'no-repeat',
    backgroundSize: ['100%', '100%'],
    backgroundPosition: ['0%', '0%'],
    borderTop: {
      color: 'rgba(237,238,233,1)',
      width: 0,
      style: 'solid',
    },
    borderBottom: {
      color: 'rgba(237,238,233,1)',
      width: 0,
      style: 'solid',
    },
    borderLeft: {
      color: 'rgba(237,238,233,1)',
      width: 0,
      style: 'solid',
    },
    borderRight: {
      color: 'rgba(237,238,233,1)',
      width: 0,
      style: 'solid',
    },
  },
  coverImg: '',
};

/**
 * 图层配置
 */
export const layerPanelConfig = {
  //图层最大层级
  maxLevel: 3,
  //图层类型
  layerTreeNodeType: {
    layer: 'layer',
    group: 'group',
  },
  //图层根id
  layerTreeRootNodeId: '_LAYER_TREE_ROOT_ID_',
  //图层根
  layerTreeRootNode: {
    id: '_LAYER_TREE_ROOT_ID_',
    label: '我的图层',
    img: groupImg,
    checked: false,
    type: 'group',
    open: true,
    children: [],
    level: 0,
  },
  // 图层组件默认值
  groupComponent: {
    name: 'group', //组件名
    group: visualComponentGroup.group.value, //组件分组
    label: '图层组', //组件标签名
    img: groupImg,
    propertyComponent: 'hvGroupProperty', //属性配置组件
    componentStyleGeneratorName: 'hvGroupStyleGenerator',
    ...cloneDeep(visualComponentConfig.options),
  },
};

export {
  visualComponentConfig,
  visualComponentGroup,
  componentGroupConfig,
  visualComponents,
  visualPropertyComponents,
  visualStyleGenerator
};
